<template>
    <div class="title">全局属性(Global Properties)</div>
    <div class="unitBar">
         <span>显示全部公司</span>
     </div>
     <div class="unitBar">
         <table class="vforTable">
             <tr>
                 <th>编号</th>
                 <th>Name</th>
                 <th>国家</th>
                 <th>URL</th>
             </tr>
             <tr v-for="jsonitem in dataArray" :key="jsonitem.id">
                 <td>{{ jsonitem.id }}</td>
                 <td>{{ jsonitem.name }}</td>
                 <td>{{ jsonitem.state }}</td>
                 <td>{{ jsonitem.url }}</td>
             </tr>
         </table>
     </div> 
 </template>
 
 <script setup>
 import { getCurrentInstance,ref } from 'vue';
 const{proxy}=getCurrentInstance();
 let dataArray=ref(proxy.$countriesData);
      dataArray.value= [
    {
        id: 1,
        name: 'Google',
        url: 'http://www.google.com',
        state: 'USA'
    },
    {
        id: 2,
        name: 'Baidu',
        url: 'http://www.baidu.com',
        state: 'PRC'
    },
    {
        id: 3,
        name: 'Tencent',
        url: 'http://www.tencent.com',
        state: 'PRC'
    },
    {
        id: 4,
        name: 'ByteDance',
        url: 'http://www.bytedance.com',
        state: 'PRC'
    },
    {
        id: 5,
        name: 'Microsoft',
        url: 'http://www.microsoft.com',
        state: 'USA'
    },
    {
        id: 6,
        name: 'Alibaba',
        url: 'http://www.alibaba.com',
        state: 'PRC'
    },
]
 </script>
 
 <style scoped>

 </style>